<template>
  <!-- 选择及排序展示形式 -->
  <a-row>
    <a-col span="8">
      <a-checkbox v-model:checked="checkAll"
                  :indeterminate="checkIndeterminate"
                  @change="handleToggleCheckAll">
        {{ !selectedCnt ? `共 ${fileCnt} 项` : `已选 ${selectedCnt} 项` }}
      </a-checkbox>
    </a-col>
    <a-col span="16" style="text-align: right;">
      <a-dropdown :trigger="['click']">
        <a-button type="text">
          <template #icon><IconFont :type="orderData.orderType === 'ASC' ? 'ArrowUpOutlined' : 'ArrowDownOutlined'"/></template>
          {{ `按${orderData.orderColumnDesc}${orderData.orderType === 'ASC' ? '升序' : '降序'}` }}
        </a-button>
        <template #overlay>
          <a-menu @click="handleOrder" class="atom-sysfile-dropdown">
            <a-menu-item key="name" :class="orderData.orderColumn === 'name' ? 'has-icon' : ''">
              <template #icon><IconFont :type="orderData.orderColumn === 'name' ? 'CheckOutlined' : ''"/></template>名称
            </a-menu-item>
            <a-menu-item key="modifyTime" :class="orderData.orderColumn === 'modifyTime' ? 'has-icon' : ''">
              <template #icon><IconFont :type="orderData.orderColumn === 'modifyTime' ? 'CheckOutlined' : ''"/></template>编辑时间
            </a-menu-item>
            <a-menu-item key="size" :class="orderData.orderColumn === 'size' ? 'has-icon' : ''">
              <template #icon><IconFont :type="orderData.orderColumn === 'size' ? 'CheckOutlined' : ''"/></template>文件大小
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="ASC" :class="orderData.orderType === 'ASC' ? 'has-icon' : ''">
              <template #icon><IconFont :type="orderData.orderType === 'ASC' ? 'CheckOutlined' : ''"/></template>升序
            </a-menu-item>
            <a-menu-item key="DESC" :class="orderData.orderType === 'DESC' ? 'has-icon' : ''">
              <template #icon><IconFont :type="orderData.orderType === 'DESC' ? 'CheckOutlined' : ''"/></template>降序
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <a-tooltip title="切换视图">
        <a-button type="text">
          <template #icon><IconFont :type="viewType === 'card' ? 'AppstoreOutlined' : 'BarsOutlined'"/></template>
        </a-button>
      </a-tooltip>
    </a-col>
  </a-row>
  <!-- 列表展示形式 -->
  <a-table v-if="viewType === 'list'"
           class="atom-sysfile-list"
           size="small"
           :rowKey="record => record.id + ''"
           :rowSelection="{ columnWidth: 0, selectedRowKeys: selectedFileKeys, onChange: handleSelection }"
           :dataSource="fileList">
    <a-table-column key="name" title="名称" data-index="age" class="atom-sysfile-name">
      <template #default="{ record }">
        <IconFont type="atom-folder"/>
        <span class="atom-sysfile-name-title">{{ record.name }}</span>
        <a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
          <IconFont type="EllipsisOutlined" />
          <template #overlay>
            <a-menu @click="handleOperate">
              <a-menu-item key="download">下载</a-menu-item>
              <a-menu-item key="rename">重命名</a-menu-item>
              <a-menu-item key="move">移动到</a-menu-item>
              <a-menu-item key="delete" class="atom-sysfile-operate-delete">删除</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-table-column>
    <a-table-column width="200px" key="modifyTime" title="编辑时间" data-index="modifyTime">
    </a-table-column>
    <a-table-column width="120px" key="size" title="大小" data-index="size">
      <template #default="{ record }">
        {{ $utils.formatSize(record.size) }}
      </template>
    </a-table-column>
  </a-table>
  <!-- 卡片展示形式 -->
  <!-- 多选时的操作按钮 -->
  <FloatBar v-model="batchVisible"
            :actions="batchActions"
            closeTitle="取消多选"
            @click="handleBatchOperate"
            @close="handleOperateClose"></FloatBar>
</template>

<script>
import FloatBar from '@/components/Common/FloatBar'
/**
 * 文件展示，分为list card两种展示形式
 */
export default {
  name: 'ListView',
  components: { FloatBar },
  props: {
    // 文件列表
    fileList: {
      type: Array,
      requried: true
    },
    // 文件总数
    totalCnt: {
      type: Number,
      default: 0
    },
    // 是否还有更多数据
    hasMore: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 文件展示形式 list card
      viewType: 'list',
      // 是否全部选中
      checkAll: false,
      // 已经选中的文件keys
      selectedFileKeys: [],
      // 已经选中的文件列表
      selectedFiles: [],
      // 排序信息
      orderData: {
        orderColumn: 'name',
        orderColumnDesc: '名称',
        orderType: 'ASC'
      },
      // 批量操作显示与否
      batchVisible: false,
      // 批量操作功能
      batchActions: [
        this.$default.ACTION.DOWNLOAD,
        this.$default.ACTION.MOVE,
        this.$default.ACTION.DELETE
      ]
    }
  },
  computed: {
    // 已加载文件数量
    fileCnt () {
      return this.fileList.length
    },
    // 选中的文件数量
    selectedCnt () {
      return this.selectedFiles.length
    },
    // 全选是否半选中
    checkIndeterminate () {
      return !!this.selectedCnt && this.selectedCnt < this.fileCnt
    }
  },
  watch: {
    // 监听已选中的变化来判断是否显示工具栏
    selectedCnt (newValue) {
      this.batchVisible = !!newValue
    }
  },
  methods: {
    // 响应排序
    handleOrder ({ key }) {
      // 更改排序字段
      if (['name', 'modifyTime', 'size'].includes(key)) {
        this.orderData.orderColumn = key
        this.orderData.orderColumnDesc = key === 'name' ? '名称' : key === 'modifyTime' ? '编辑时间' : '文件大小'
      } else if (['ASC', 'DESC'].includes(key)) {
        this.orderData.orderType = key
      }
    },
    // 响应全选切换
    handleToggleCheckAll () {
      if (this.checkAll) {
        this.selectedFiles = this.fileList
        this.selectedFileKeys = this.fileList.map(file => file.id + '')
      } else {
        this.selectedFiles = []
        this.selectedFileKeys = []
      }
    },
    // 响应行选中变化
    handleSelection (selectedRowKeys, selectedRows) {
      this.selectedFiles = selectedRows
      this.selectedFileKeys = selectedRowKeys
      this.checkAll = this.selectedCnt === this.fileCnt
    },
    // 响应文件操作
    handleOperate ({ key }) {
      console.log(key)
    },
    // 响应批量操作
    handleBatchOperate (action) {
      console.log(action)
    },
    // 响应工具条关闭
    handleOperateClose () {
      this.checkAll = false
      this.handleToggleCheckAll()
    }
  }
}
</script>
